import type { FC } from 'react';
import { useMemo } from 'react';
import { Image } from 'expo-image';
import { View, StyleSheet } from 'react-native';
import type { AvatarProps } from './types';
import styles, { sizes } from './styles';

const Avatar: FC<AvatarProps> = (props) => {
  const { size = 'middle' } = props;

  const avatarSise = useMemo(() => {
    return typeof size === 'string' ?
      sizes[size] : size;
  }, [size]);

  const sizeStyle = useMemo(() => {
    return {
      width: avatarSise,
      height: avatarSise,
      borderRadius: avatarSise / 2
    };
  }, [avatarSise]);

  const wrapperStyle = StyleSheet.flatten([
    styles.container,
    sizeStyle,
    props.style
  ]);

  return (
    <View style={wrapperStyle}>
      <Image
        transition={500}
        contentFit="cover"
        source={props.url}
        style={styles.image}
      />
    </View>
  );
}

export default Avatar;